<template>
  <div class="app-container">
    <div class="query-box" align="right">
          <el-form :model="query" ref="queryForm" :inline="true" label-width="70px">
            <el-form-item label="项目：" label-width="70px">
              <el-select
                v-model="query.projectId"
                placeholder="请选择"
                clearable
                size="small"
              >
                <el-option v-for="item in projects" :label="item.name" :value="item.id" :key="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="状态：" prop="result">
              <el-radio-group v-model="query.result">
                <el-radio label="ENABLE" value="ENABLE">成功</el-radio>
                <el-radio label="DISABLE" value="DISABLE">失败</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button>
          </el-form>
    </div>

    <el-table v-loading="loading" :data="list" element-loading-text="Loading" border fit class="table">
      <el-table-column align="center" label="项目名称" prop="projectName"></el-table-column>
      <el-table-column align="center" label="结果" prop="result">
        <template slot-scope="scope">
          <i v-if="scope.row.result == 1" class="iconfont el-icon-circle-check list-icon-green"/>
          <i v-else class="iconfont el-icon-circle-close list-icon-red"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="结果说明" prop="resultRemark"></el-table-column>
      <el-table-column align="center" label="操作人" prop="creatorName"></el-table-column>
      <el-table-column align="center" prop="createTime" label="生成时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | datetimeFormat}}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNo"
                     :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
    </div>
  </div>
</template>

<script>
  import {projectGenHis, projectList} from "@/api/api"
  import '@/store/global'
  export default {
    name: "Project",
    data() {
      return {
        projects: [],
        userStatus: userStatus,
        projectItemTab: "PROJECT",
        // 遮罩层
        loading: true,
        list: [],
        pageTotal: 0,
        query: {
          name: '',
          pageNo: 0,
          pageSize: 10
        },
        // 表单参数
        form: {},
        detail: {
          projectId: false
        }
      };
    },
    created() {
      this.getList();
      this.getProjectList();
    },
    methods: {
      /** 搜索按钮操作 */
      handleSearch() {
        this.getList();
      },
      getProjectList() {
        projectList(this.query).then(response => {
          this.projects = response.data;
        })
      },
      getList() {
        this.loading = true;
        projectGenHis(this.query).then(response => {
          this.list = response.data.records;
          this.query.pageNo = response.data.current;
          this.pageTotal = response.data.total;
          this.loading = false
        })
      },
      /** 重置按钮操作 */
      resetSearch() {
        this.query = {}
      },
      // 分页导航
      handlePageChange(val) {
        this.query.pageNo = val
        this.getList(this.query)
      },
    }
  };
</script>
